<!DOCTYPE html>
<html lang="en">
<head>
	<title>Bright theme for Shower</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=680, user-scalable=no">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<link rel="stylesheet" href="styles/screen.css">
</head>
<body class="list">
	<!--
		Debug class on <body> enables
		cyan grid on slides
		-->
	<header class="caption">
		<h1>Presentation Title</h1>
		<p><a href="">Yours Truly</a>, Famous Inc.</p>
	</header>
	<section class="slide"><div>
		<h2>Header</h2>
		<p>Typewriter etsy messenger bag <a href="">fingerstache</a>, aesthetic vinyl semiotics twee <strong>DIY</strong> forage chillwave. Thundercats ennui messenger bag, <em>squid</em> carles chillwave shoreditch pickled cliche <b>letterpress</b>. DIY beard locavore <i>occupy</i> salvia, whatever single-origin <code>coffee</code> fanny pack 3 wolf moon typewriter gastropub<sup>1</sup> kale H<sub>2</sub>0 chips. Ennui keffiyeh thundercats jean shorts biodiesel. Terry richardson, swag blog locavore umami vegan helvetica. Fingerstache kale chips.</p>
		<footer>
			Typewriter etsy messenger bag fingerstache.
		</footer>
	</div></section>
	<section class="slide"><div>
		<h2>Header</h2>
		<p>DIY beard locavore occupy salvia, whatever single-origin coffee fanny pack 3 wolf moon typewriter gastropub kale chips. Ennui keffiyeh thundercats jean shorts biodiesel.</p>
		<p>Typewriter etsy messenger bag fingerstache, aesthetic vinyl semiotics twee DIY forage chillwave. Thundercats ennui messenger bag, squid carles chillwave shoreditch pickled cliche letterpress.</p>
		<footer>
			DIY beard locavore occupy salvia, whatever single-origin coffee fanny pack 3 wolf moon typewriter gastropub kale chips. Ennui keffiyeh thundercats jean shorts biodiesel.
		</footer>
	</div></section>
	<section class="slide"><div>
		<h2>Lists in English typography</h2>
		<ul>
			<li>Ennui keffiyeh thundercats</li>
			<li>Jean shorts biodiesel</li>
			<li>Terry richardson, swag blog
				<ol>
					<li>Locavore umami vegan helvetica</li>
					<li>Fingerstache kale chips</li>
					<li>Keytar sriracha gluten-free</li>
				</ol>
			</li>
			<li>Before they sold out master</li>
		</ul>
	</div></section>
	<section class="slide" lang="ru"><div>
		<h2>Lists in Russian typography</h2>
		<ul>
			<li>Ennui keffiyeh thundercats</li>
			<li>Jean shorts biodiesel</li>
			<li>Terry richardson, swag blog
				<ol>
					<li>Locavore umami vegan helvetica</li>
					<li>Fingerstache kale chips</li>
					<li>Keytar sriracha gluten-free</li>
				</ol>
			</li>
			<li>Before they sold out master</li>
		</ul>
	</div></section>
	<section class="slide"><div>
		<h2>Lists in English typography</h2>
		<ol>
			<li>Locavore umami vegan helvetica</li>
			<li>Fingerstache kale chips</li>
			<li>Keytar sriracha gluten-free</li>
		</ol>
		<ul>
			<li>Ennui keffiyeh thundercats</li>
			<li>Jean shorts biodiesel</li>
			<li>Terry richardson, swag blog</li>
		</ul>
	</div></section>
	<section class="slide"><div>
		<h2>Quote</h2>
		<figure>
			<blockquote>
				<p>Typewriter etsy messenger bag fingerstache, aesthetic vinyl semiotics twee DIY forage chillwave. Thundercats ennui messenger bag, squid carles chillwave shoreditch pickled cliche letterpress.</p>
			</blockquote>
			<figcaption>Author Name</figcaption>
		</figure>
		<p>DIY beard locavore occupy salvia, whatever single-origin coffee fanny pack 3 wolf moon typewriter gastropub kale chips.</p>
	</div></section>
	<section class="slide"><div>
		<h2>Table</h2>
		<table>
		<tr>
			<th scope="col">Locavore</th>
			<th>Umami</th>
			<th>Helvetica</th>
			<th>Vegan</th>
		</tr>
		<tr>
			<th scope="row">Fingerstache</th>
			<td>Kale</td>
			<td>Chips</td>
			<td>Keytar</td>
		</tr>
		<tr>
			<th scope="row">Sriracha</th>
			<td>Gluten-free</td>
			<td>Ennui</td>
			<td>Keffiyeh</td>
		</tr>
		<tr>
			<th scope="row">Thundercats</th>
			<td>Jean</td>
			<td>Shorts</td>
			<td>Biodiesel</td>
		</tr>
		<tr>
			<th scope="row">Terry</th>
			<td>Richardson</td>
			<td>Swag</td>
			<td>Blog</td>
		</tr>
		</table>
		<p>Typewriter etsy messenger bag fingerstache.</p>
	</div></section>
	<section class="slide"><div>
		<h2>Numbered code listing</h2>
		<pre>
			<code>&lt;html lang="en"&gt;</code>
			<code><mark>&lt;head&gt;</mark> <mark class="comment">&lt;!--Comment--&gt;</mark></code>
			<code>    &lt;title&gt;Shower&lt;/title&gt;</code>
			<code>    &lt;meta charset="<mark class="important">UTF-8</mark>"&gt;</code>
			<code>    &lt;link rel="stylesheet" href="s/screen.css"&gt;</code>
			<code>    &lt;script src="j/jquery.js"&gt;&lt;/script&gt;</code>
			<code><mark>&lt;/head&gt;</mark></code>
		</pre>
	</div></section>
	<section class="slide"><div>
		<h2>Plain code listing</h2>
		<pre><code>&lt;html lang="en"&gt;
<mark>&lt;head&gt;</mark> <mark class="comment">&lt;!--Comment--&gt;</mark>
	&lt;title&gt;Shower&lt;/title&gt;
	&lt;meta charset="<mark class="important">UTF-8</mark>"&gt;
	&lt;link rel="stylesheet" href="s/screen.css"&gt;
	&lt;script src="j/jquery.js"&gt;&lt;/script&gt;
<mark>&lt;/head&gt;</mark></code></pre>
	</div></section>
	<section class="slide shout"><div>
		<h2>
			You Can<br>
			Shout This Way
		</h2>
		<footer>
			Typewriter etsy messenger bag fingerstache.
		</footer>
	</div></section>
	<section class="slide shout"><div>
		<h2><a href="">Linked Shout</a></h2>
	</div></section>
	<section class="slide shout right"><div>
		<h2>Sliding Right</h2>
	</div></section>
	<section class="slide shout up"><div>
		<h2>Sliding Up</h2>
	</div></section>
	<section class="slide cover"><div>
		<img src="pictures/exact.png" alt="">
	</div></section>
	<section class="slide cover w"><div>
		<img src="pictures/wide.png" alt="">
	</div></section>
	<section class="slide cover h"><div>
		<img src="pictures/tall.png" alt="">
		<footer>
			Typewriter etsy messenger bag fingerstache.
		</footer>
	</div></section>
	<section class="slide cover h"><div>
		<img src="pictures/wide.png" alt="">
	</div></section>
	<section class="slide cover w"><div>
		<img src="pictures/tall.png" alt="">
	</div></section>
	<section class="slide shout"><div>
		<img src="pictures/square.png" alt="" class="place t l">
		<img src="pictures/square.png" alt="" class="place t">
		<img src="pictures/square.png" alt="" class="place t r">
		<img src="pictures/square.png" alt="" class="place l">
		<img src="pictures/square.png" alt="" class="place">
		<img src="pictures/square.png" alt="" class="place r">
		<img src="pictures/square.png" alt="" class="place b l">
		<img src="pictures/square.png" alt="" class="place b">
		<img src="pictures/square.png" alt="" class="place b r">
	</div></section>
	<section class="slide" data-timing="00:03"><div>
		<h2>Timer</h2>
		<p>Three seconds to go.</p>
	</div></section>
	<section class="slide"><div>
		<h2>List navigation</h2>
		<ol>
			<li>Ennui keffiyeh thundercats</li>
			<li class="next">Jean shorts biodiesel</li>
			<li class="next">Terry richardson, swag blog</li>
			<li class="next">Locavore umami vegan helvetica</li>
			<li class="next">Fingerstache kale chips</li>
		</ol>
		<p class="next">Before they sold out master</p>
	</div></section>
	<p class="badge"><a href="https://github.com/shower/shower">Fork me on Github</a></p>
	<!--
		To hide progress bar from entire presentation
		just remove “progress” element.
		-->
	<div class="progress"><div></div></div>
	<script src="../../shower.min.js"></script>
	<!-- Copyright © 2014 Yours Truly, Famous Inc. -->
</body>
</html>